@php
switch($type) {
    case 'info':
        $class = 'bg-indigo-100 border-indigo-500';
        break;
    case 'error':
        $class = 'bg-red-100 border-red-500';
        break;
    default:
        $class = 'bg-indigo-100 border-indigo-500';
}
@endphp
<div x-data="{shown: false, timeout: null}"
     x-init="@this.on('show',  (t) => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, t);  })"
>
    <div class="fixed bottom-0 left-0 w-64" x-show.transition.opacity.out.duration.1500ms="shown" style="display: none">
        <div class="shadow overflow-hidden ml-4 mb-4 text-gray-700 ">
            <div class="border-t-4 rounded-b min-w-xl text-gray-900 px-4 py-3 shadow-md px-2 py-3 sm:p-4 text-sm {{$class}}">

                <div>
                    @if($title)
                    <p class="font-bold">{{$title}}</p>
                    @endif
                    <p class="text-sm">{{$content}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

